<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>HTML5 WebForms</title>
<script src="../dom/__ns__.js"></script>
<script src="../util/__ns__.js"></script>
<script src="../util/Locale.js"></script>
<script src="../locale/__ns__.js"></script>
<script src="../locale/Validation.js"></script>
<script src="__ns__.js"></script>
<script src="PlaceHolder.js"></script>
<script src="Validation.js"></script>
<style>

.placeholder {
  /* ::-webkit-input-placeholder */
  /* :-moz-placeholder {} */
  color: darkGray;
}

/**
 * http://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css?rev=82180#L588
 */
.validation-bubble {
  /* ::-webkit-validation-bubble */
  margin-top: 4px; 
  opacity: 0.95;
  position: absolute;
  -webkit-transition: opacity 05.5s ease;
  z-index: 2147483647;

  /* ::-webkit-validation-bubble-message */
  background: -webkit-gradient(linear, left top, left bottom, from(#f8ecec), to(#e8cccc));
  border: solid 2px #400;
  padding: 8px;
  -webkit-border-radius: 8px;
  -webkit-box-shadow: 4px 4px 4px rgba(100,100,100,0.6),
     inset -2px -2px 1px #d0c4c4,
     inset 2px 2px 1px white;
}

.validation-bubble:before {
  /* ::-webkit-validation-bubble-arrow */
  border-style: solid;
  border-width: 0 0.7em 0.7em 0.7em;
  border-color: transparent transparent #400 transparent;
  content: '';
  left: 0.3em;
  position: absolute;
  top: -0.7em;
}
</style>
</head>
<body>
  <form>
    <table>
    <tr><td><label>Placeholder: </label></td>
        <td><input placeholder="Placeholder" name="placeholder"></td></tr>
    <tr><td><label>Required: </label></td>
        <td><input required name="required" title="This field is required"></td></tr>
    <tr><td><label>Email: </label></td>
        <td><input required type="email" name="email"></td></tr>
    <tr><td><label>URL: </label></td>
        <td><input required type="url" name="url"></td></tr>
    <tr><td><label>Pattern: </label></td>
        <td><input required pattern="^\d\d/\d\d/\d\d\d\d$" placeholder="dd/mm/yyyy" name="pattern"></td></tr>
    <tr><td><label>Number: </label></td>
        <td><input required type="number" name="number" min="0" max="10"></td></tr>

    <tr><td colspan="2" align="right"><button type="submit">Submit</button></td></tr>
    </table>
  </form>
  <script>forms.init(document.forms[0]);</script>

  <script>
  var _gaq = _gaq || [];
  
  _gaq.push(
            ['projectTracker._setAccount', 'UA-5065160-9'],
            ['projectTracker._trackPageview']);
  
  (function() {
   if (document.location.protocol != 'file:') {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
   }
  })();
  </script>
</body>
</html>